<!DOCTYPE html>
<html>
<head>
    <title>Open Diagram</title>
    <link rel="stylesheet" type="text/css" href="styles/grapheditor.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript">
	// Handles form-submit by preparing to process response
	function handleSubmit()
	{
		var form = window.openForm || document.getElementById('openForm');
		
		if (window.parent.openNew && window.parent.baseUrl != null)
		{
			window.parent.openFile.setConsumer(null);
			window.parent.open(window.parent.baseUrl);
		}
		
		// NOTE: File is loaded via JS injection into the iframe, which in turn sets the
		// file contents in the parent window. The new window asks its opener if any file
		// contents are available or waits for the contents to become available.
		return true;
	};
	
	// Hides this dialog
	function hideWindow(cancel)
	{
		window.parent.openFile.cancel(cancel);
	}
	
	function fileChanged()
	{
		var supportedText = document.getElementById('openSupported');
		var form = window.openForm || document.getElementById('openForm');
		var openButton = document.getElementById('openButton');
		
		if (form.upfile.value.length > 0)
		{
			openButton.removeAttribute('disabled');
		}
		else
		{
			openButton.setAttribute('disabled', 'disabled');
		}		
	}

	function main()
	{
		if (window.parent != null && window.parent.Editor != null)
		{
			if (window.parent.Editor.useLocalStorage)
			{
				document.body.innerHTML = '';
				var div = document.createElement('div');
				div.style.fontFamily = 'Arial';
	
				window.parent.listBrowserFiles(function(filesInfo)
				{
					if (filesInfo.length == 0)
					{
						window.parent.mxUtils.write(div, window.parent.mxResources.get('noFiles'));
						window.parent.mxUtils.br(div);
					}
					else
					{
						// Sorts the array by filename (titles)
						filesInfo.sort(function (a, b)
						{
						    return a.title.toLowerCase().localeCompare(b.title.toLowerCase());
						});
						
						var table = document.createElement('table');
						var hrow = document.createElement('tr');
						hrow.style.backgroundColor = '#D6D6D6';
						hrow.style.height = '25px';
						hrow.style.textAlign = 'left';
						table.appendChild(hrow);
						var hName = document.createElement('th');
						window.parent.mxUtils.write(hName, window.parent.mxResources.get('name'));
						hrow.appendChild(hName);
						var hModified = document.createElement('th');
						hModified.style.width = '130px';
						window.parent.mxUtils.write(hModified, window.parent.mxResources.get('lastModified'));
						hrow.appendChild(hModified);
						var hSize = document.createElement('th');
						window.parent.mxUtils.write(hSize, window.parent.mxResources.get('size'));
						hSize.style.width = '70px';
						hrow.appendChild(hSize);
						var hCtrl = document.createElement('th');
						hCtrl.style.width = '23px';
						hrow.appendChild(hCtrl);
						table.style.fontSize = '12pt';
						table.style.width = '100%';
	
						for (var i = 0; i < filesInfo.length; i++)
						{
							var fileInfo = filesInfo[i];
							
							if (fileInfo.title.length > 0)
							{
								var row = document.createElement('tr');
								table.appendChild(row);
								
								if (i & 1 == 1)
								{
									row.style.backgroundColor = '#E6E6E6';
								}
									
								var nameTd = document.createElement('td');
								row.appendChild(nameTd);
								var link = document.createElement('a');
								link.style.fontDecoration = 'none';
								window.parent.mxUtils.write(link, fileInfo.title);
								link.style.cursor = 'pointer';
								nameTd.appendChild(link);
								
								var modifiedTd = document.createElement('td');
								row.appendChild(modifiedTd);
								var str = window.parent.EditorUi.prototype.timeSince(new Date(fileInfo.lastModified));
								
								if (str == null)
								{
									str = window.parent.mxResources.get('lessThanAMinute');
								}
								
								window.parent.mxUtils.write(modifiedTd, window.parent.mxResources.get('timeAgo', [str]));
								
								var sizeTd = document.createElement('td');
								row.appendChild(sizeTd);
								window.parent.mxUtils.write(sizeTd, window.parent.EditorUi.prototype.formatFileSize(fileInfo.size));
								
								var ctrlTd = document.createElement('td');
								row.appendChild(ctrlTd);
								ctrlTd.style.textAlign = 'center';
								var img = document.createElement('span');
								img.className = 'geSprite geSprite-delete';
								img.style.cursor = 'pointer';
								img.style.display = 'inline-block';
								ctrlTd.appendChild(img);
								
								window.parent.mxEvent.addListener(img, 'click', (function(k)
								{
									return function()
									{
										if (window.parent.mxUtils.confirm(window.parent.mxResources.get('delete') + ' "' + k + '"?'))
										{
											window.parent.deleteBrowserFile(k, function()
											{
												window.location.reload();											
											});
										}
									};
								})(fileInfo.title));
			
								window.parent.mxEvent.addListener(link, 'click', (function(k)
								{
									return function()
									{
										if (window.parent.openNew && window.parent.baseUrl != null)
										{
											var of = window.parent.openFile;
											window.parent.openBrowserFile(k, function(data)
											{
												window.parent.openWindow(window.parent.baseUrl + '#L' + encodeURIComponent(k), function()
												{
													of.cancel(false);
												}, function()
												{
													of.setData(data, k);
												});									
											}, function()
											{
												//TODO add error
											});
										}
										else
										{
											window.parent.openBrowserFile(k, function(data)
											{
												window.parent.openFile.setData(data, k);
											}, function()
											{
												//TODO add error
											});
										}
									};
								})(fileInfo.title));
							}
						}
						
						div.appendChild(table);
					}
					
					var closeButton = window.parent.mxUtils.button(window.parent.mxResources.get('close'), function()
					{
						hideWindow(true);
					});
					
					closeButton.className = 'geBtn';
					closeButton.style.position = 'fixed';
					closeButton.style.bottom = '0px';
					closeButton.style.right = '0px';
					div.appendChild(closeButton);
					
					document.body.appendChild(div);
				});
			}
			else
			{
				var editLink = document.getElementById('editLink');
				var openButton = document.getElementById('openButton');
				openButton.value = window.parent.mxResources.get(window.parent.openKey || 'open');
				var closeButton = document.getElementById('closeButton');
				closeButton.value = window.parent.mxResources.get('close');
				var supportedText = document.getElementById('openSupported');
				supportedText.innerHTML = window.parent.mxResources.get('openSupported');
				var form = window.openForm || document.getElementById('openForm');
	
				form.setAttribute('action', window.parent.OPEN_URL);
			}
		}
		else
		{
			document.body.innerHTML = 'Missing parent window';
		}
	};
</script>
<body onload="main();">
<form method="POST" enctype="multipart/form-data" action="" name="openForm"
	id="openForm" onsubmit="return handleSubmit();" accept-charset="UTF-8">
<table style="width:100%;">
<tr>
<td style="height:40px;vertical-align:top;" colspan="2">
<input type="file" name="upfile" onchange="fileChanged()">
</td>
</tr>
<tr>
<td colspan="2" height="120px" id="openSupported" style="font-family:arial;color:grey;font-size:9pt;vertical-align:top;text-align:left;">
</td>
</tr>
<tr>
<td>
</td>
<td style="vertical-align:middle;text-align:right;white-space:nowrap;">
<input type="button" id="closeButton" class="geBtn" value="Cancel" onclick="hideWindow(true);">
<input type="submit" id="openButton" class="geBtn gePrimaryBtn" value="Open" disabled="disabled">
</td>
</tr>
</table>
</form>
</body>
</html>
